<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 500px;
            width: 480px;
            width: 483px;
            margin: 50px auto;
            border: 10px solid #000;
            overflow: hidden;
            padding-bottom: 10px;
        }

        .box div {
            width: 100px;
            height: 100px;
            background: greenyellow;
            float: left;
            margin: 10px;
            margin: 10px 10px 0 10px;
            display: inline;
        }
    </style>
</head>
<body>
<!--
    IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效
    IE7下，不管宽度相差多少，直接失效
    解决方法
        用padding解决
-->
<div class="box">
    <div class="div">1</div>
    <div class="div">2</div>
    <div class="div">3</div>
    <div class="div">4</div>
    <div class="div">1</div>
    <div class="div">2</div>
    <div class="div">3</div>
    <div class="div">4</div>
    <div class="div">1</div>
    <div class="div">2</div>
    <div class="div">3</div>
    <div class="div">4</div>
</div>
</body>
</html>
